<template>
  <a-modal
    :title="modalTitle"
    :width="1100"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <template slot="footer">
      <a-button key="submit" type="primary"  @click="handleSubmit">
        下一步
      </a-button>
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1" :activeKey="tabActiveKey" @change="goToTab">
        <a-tab-pane key="1" :disabled="tabActiveKey!=='1'">
          <span slot="tab">
            <a-icon type="apple" />
            基本配置
          </span>
          <step1 ref="step1" @ok="step1Ok"></step1>
        </a-tab-pane>

        <a-tab-pane key="2" :disabled="tabActiveKey!=='2'">
          <span slot="tab">
            <a-icon type="android" />
            模型选择
          </span>
          <step2 ref="step2" @ok="step2Ok"></step2>
        </a-tab-pane>

        <a-tab-pane key="3" :disabled="tabActiveKey!=='3'">
          <span slot="tab">
            <a-icon type="android" />
            SEO 设置
          </span>
          <step3 ref="step3" @ok="step3Ok"></step3>
        </a-tab-pane>

      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
  import step1 from './step1.vue'
  import step2 from './step2.vue'
  import step3 from './step3.vue'
  export default {
    components: {
      step1,
      step2,
      step3
    },
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 7
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 13
          }
        },
        item: {},
        tabActiveKey: '1',
        activeCollapseKey: '0',
        modalTitle: '',
        modalOpera: 0, // 0：新增 1：编辑
        categoryId: null,
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    created () {},
    methods: {
      add (pitem) {
        this.modal('新建栏目', 0)
        this.item = pitem
        this.categoryId = null
        this.setParent(pitem)
      },
      setParent (pitem) {
        const _this = this
        setTimeout(function () {
          _this.$refs.step1.setParent(pitem, _this.modalOpera)
        }, 350)
      },
      edit (record) {
        const _this = this
        this.modal('编辑栏目', 1)
        setTimeout(function () {
          _this.$refs.step1.edit(record)
        }, 350)
      },
      modal (title, opera) {
        this.modalTitle = title
        this.modalOpera = opera
        this.visible = true
      },
      step1Ok (id) {
        this.$emit('ok')
        this.categoryId = id
        this.goToTab('2')
        const _this = this
        setTimeout(function () {
          _this.$refs.step2.setCategoryId(id)
        }, 350)
      },
      step2Ok () {
        this.goToTab('3')
        const _this = this
        setTimeout(function () {
          _this.$refs.step3.setCategoryId(_this.categoryId)
        }, 350)
      },
      step3Ok () {
         this.goToTab('1')
         this.handleCancel()
      },
      goToTab (tabId) {
        this.tabActiveKey = tabId
      },
      handleCancel () {
        this.visible = false
        this.categoryId = null
        if (this.tabActiveKey === '1') {
          this.step1Cancel()
        } else if (this.tabActiveKey === '2') {
          this.step2Cancel()
        } else {
          this.step3Cancel()
        }
        this.goToTab('1')
      },
      handleSubmit () {
        if (this.tabActiveKey === '1') {
          this.step1Submit()
        } else if (this.tabActiveKey === '2') {
          this.step2Submit()
        } else {
          this.step3Submit()
        }
      },
      step1Submit () {
        this.$refs.step1.handleSubmit()
      },
      step2Submit () {
        this.$refs.step2.handleSubmit()
      },
      step3Submit () {
        this.$refs.step3.handleSubmit()
      },
      step1Cancel () {
        this.$refs.step1.handleCancel()
      },
      step2Cancel () {
        this.step1Cancel()
        this.$refs.step2.handleCancel()
      },
      step3Cancel () {
        this.step1Cancel()
        this.$refs.step3.handleCancel()
      }
    }
  }
</script>
